<script setup lang="ts">
import { docheckcodeFn, dosendmsgcodeFn } from '@/api/user';
import { ref, computed } from 'vue';
import type { Ref, ComputedRef } from 'vue';
import { showToast } from 'vant';
import { useRouter } from 'vue-router';

const router = useRouter()


const telcode: Ref<string, string> = ref('')

const isClick: ComputedRef<boolean> = computed(() => {
    return telcode.value.length == 5
})

const timer: Ref<number, number> = ref(10)
const text: Ref<string, string> = ref('发送验证码')

let interval: any = 0
function sendCodeClick() {
    timer.value--
    interval = setInterval(() => {
        text.value = '还剩：' + timer.value + "s"
        timer.value--
        if (timer.value <= -1) {
            text.value = '重新获取'
            timer.value = 10
            clearInterval(interval)
        }
    }, 1000)

    // 发送验证码的数据请求
    dosendmsgcodeFn({
        tel: sessionStorage.getItem('tel') || ''
    }).then(res => {
        // console.log(res);
        showToast('验证码：' + res.data.data);
        if (res.data.code == '200') {

        }
    })

}
// $router.push('/register/step3')
function nextClick() {
    // 验证码是否正确
    docheckcodeFn({
        tel: sessionStorage.getItem('tel') || '',
        telcode: telcode.value
    }).then(res => {
        // console.log(res);
        if (res.data.code == '200') {
            router.push('/register/step3')
        } else {
            showToast(res.data.message)
        }
    })
}

</script>
<template>
    <van-form>
        <van-cell-group inset>
            <van-field v-model="telcode" name="验证码" label="验证码" placeholder="验证码"
                :rules="[{ required: true, message: '请正确填写验证码' }]">
                <template #button>
                    <van-button :disabled="timer < 10" @click="sendCodeClick" size="mini"> {{ text }} </van-button>
                </template>
            </van-field>

        </van-cell-group>
        <div style="padding: 0 20px;">
            <van-button @click="nextClick" :disabled="!isClick" style="margin: 26px 0 26px 0;" color="#f66" round block
                native-type="submit">
                下 一 步
            </van-button>

        </div>
    </van-form>
</template>